<template>
	<view class="level">
		<view class="header" :style="{ height: globalData.statusBarHeight + globalData.toBar + 10 + 'px' }">
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar backgroundColor="transparent" title="切换课本" left-icon="left" @clickLeft="goback" />
			</view>
		</view>
		<view class="book">
			<scroll-view scroll-x class="book-x">
				<view v-for="item in typeData" @click="toggleCheck(item.rid)" :class="{ isCheck: checkedItems.length && checkedItems[0] === item.rid }" class="type-card">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<h3>课程</h3>
			<scroll-view scroll-y="true" :style="{ height: contentHeight }">
				<view class="book-main" v-if="bookData.length > 0">
					<view class="bookitem" v-for="item in bookData" @click="goPage(item)">
						<!-- <view class="bgi" style="background-image: url({{`https://www.aikoolearn.com/video-dev${item.cover}`}});"></view> -->
						<image :src="`https://www.aikoolearn.com/video-dev${item.cover}`" mode="" class="bgi"></image>
						<view class="title-item">
							{{ item.name }}
						</view>
						<view class="book-right">
							<h3 class="">
								{{ item.name }}
							</h3>
							<view class="title-gray">{{ item.title || '适合英语基础较好' }}</view>
							<view class="">
								<p class="btn-p">开始</p>
							</view>
						</view>
					</view>
				</view>
				<view class="book-mains" v-else>
					<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/nodata.png" mode="" style="width: 400rpx; height: 400rpx"></image>
					<view class="nodata">暂无课程</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getTypeList, getlevel } from '@/services/level.js';

export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0,
			typeData: [],
			checkedItems: [], // 这个数组将只包含一个被选中项的ID，或者为空
			bookData: [] //分类下的book信息
		};
	},
	created() {
		// 在组件创建时获取 globalData
		try {
			this.globalData = wx.getStorageSync('globalData');
			this.calculateContentHeight();
			this.getTypeListData();
		} catch (error) {
			// 处理获取存储失败的情况
			console.error('Failed to get globalData from storage:', error);
		}
	},
	onLoad(options) {},

	methods: {
		async getTypeListData() {
			const res = await getTypeList();
			if (res.code == 200) {
				this.typeData = res.rows.sort((a, b) => {
					return a.sort - b.sort;
				});
				this.getlevelData(res.rows[0].rid);
				this.checkedItems = [res.rows[0].rid];
			}
		},
		async toggleCheck(itemId) {
			// 清除数组并添加当前项的ID
			this.checkedItems = [itemId];
			this.getlevelData(itemId);
		},
		async getlevelData(itemId) {
			const res = await getlevel({ classId: itemId });
			if (res.code == 200) {
				this.bookData = res.rows;
			}
		},
		goPage(item) {
			//
			uni.navigateTo({
				url: '/pages/level/index?item=' + JSON.stringify(item)
			});
		},
		goback() {
			uni.navigateBack();
		},
		calculateContentHeight() {
			const statusBarHeight = this.globalData.statusBarHeight;
			const toBarHeight = this.globalData.toBar;
			const additionalHeight = 100; // 额外的 60px

			// 计算内容高度
			const contentHeight = `calc(100vh - (${statusBarHeight}px + ${toBarHeight}px + ${additionalHeight}px))`;

			this.contentHeight = contentHeight;
		},
		switchbook() {
			uni.navigateTo({
				url: '/pages/switchbooks/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.level {
	height: 100vh;
	position: relative;
	.header {
		width: 100%;
		// height: 360rpx;
		background-color: #fff;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			width: 100%;
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
	}
	.line {
		width: 8rpx;
		height: 32rpx;
		background: #ffffff;
		border-radius: 4rpx;
		margin-left: 6rpx;
	}
	.book {
		white-space: nowrap; // 横向滚动必要属性
		padding: 0 24rpx;

		.type-card {
			width: 162rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #f5f5f7;
			border-radius: 16rpx;
			font-size: 28rpx;
			margin: 30rpx 10rpx 0 0;
			display: inline-block;
		}

		.isCheck {
			background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
			color: #fff;
		}
	}
	.content {
		width: 100%;
		padding: 0 24rpx;
		margin-top: 40rpx;
		border-radius: 47.71rpx 47.71rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		.book-main {
			// display: grid;
			// grid-template-columns: repeat(3, 1fr); /* 创建三列，每列占据相等的空间 */
			// grid-gap: 10px; /* 列与列之间的间隙 */
			// padding: 10px; /* 容器内边距 */
		}
		.bookitem {
			position: relative;
			display: flex;
			margin-top: 22.901rpx;
			.book-right {
				display: flex;
				flex-direction: column;
				margin-left: 22.901rpx;
				flex: 1;

				.btn-p {
					width: 88px;
					line-height: 61.069rpx;
					background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
					border-radius: 18px;
					color: #f5f5f7;
					text-align: center;
					position: absolute;
					bottom: 0;
					right: 22.901rpx;
				}
			}
			.title-item {
				font-size: 18rpx;
				color: #ffffff;
				position: absolute;
				top: 12rpx;
				left: 8rpx;
				width: 127rpx;
				font-size: 23rpx;
			}
			h3 {
				font-weight: 600;
				font-size: 32rpx;
			}
		}
	}

	.bgi {
		width: 133.588rpx;
		height: 166.031rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.title-gray {
		margin-top: 15.267rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 17px;
		text-align: left;
	}
	.book-mains {
		margin: 40rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.nodata {
			width: 400rpx;
			text-align: center;
			color: #b3b3b3;
		}
	}

	.book-x {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
	}
	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
	}
}
</style>
